<template>
  <div class="clicktuili">
    <div class="top">
      <div class="lefticon">
        <i class="iconfontunicode" @click="goback">&#xe6b1;</i>
      </div>
      <div class="iconinfo">
        <span class="gequname">{{song.name}}</span>
        <span class="geshouname" v-for="band in song.artists" :key="band.id">{{band.name}}</span>
      </div>
      <div class="righticon">
        <i class="iconfontunicode" @click="goback">&#xe616;</i>
      </div>
    </div>
    <div class="songinfo">
      <div class="lefticon">
        <i class="iconfontunicodethree" @click="goback">&#xe771;</i>
      </div>
      <img :src="song.album.picUrl" alt />
      <div class="righticon">
        <i class="iconfontunicodetwo" @click="goback">&#xe626;</i>
      </div>
    </div>
    <div class="songci">
      <ul ref="lyricUL">
        <li
          v-for="(item, i) in lyricArray"
          :style="{color: lyricIndex === i ? 'skyblue' : '#ded9d9'}"
          :key="item.uid"
          :data-index="i"
          ref="lyric"
        >{{item.lyric}}</li>
      </ul>
    </div>
    <div class="song-control">
      <audio :src="songUrl" controls autoplay ref="audio" @timeupdate="lyricPipei()"></audio>
    </div>
    <div class="songpinglun">
      <h3>热门评论</h3>
      <ul>
        <li v-for="remenpinlun in remenpinlun" :key="remenpinlun.commentId">
          <span>
            {{remenpinlun.user.nickname}}
            <img :src="remenpinlun.user.avatarUrl" alt class="pinglunimg" /> :
            <span class="grey">{{remenpinlun.content}}</span>
          </span>
          <div v-for="huifu in remenpinlun.beReplied" :key="huifu.beRepliedCommentId">
            回复：
            <span>
              {{huifu.user.nickname}}
              <img :src="huifu.user.avatarUrl" alt class="pinglunimg" /> :
              <span class="grey">{{huifu.content}}</span>
            </span>
          </div>
        </li>
      </ul>
      <h3>全部评论</h3>
      <ul>
        <li v-for="pinlun in pinlun" :key="pinlun.commentId">
          <span>
            {{pinlun.user.nickname}}
            <img :src="pinlun.user.avatarUrl" alt class="pinglunimg" /> :
            <span class="grey">{{pinlun.content}}</span>
          </span>
          <div v-for="huifu1 in remenpinlun.beReplied" :key="huifu1.beRepliedCommentId">
            回复：
            <span>
              {{huifu1.user.nickname}}
              <img :src="huifu1.user.avatarUrl" alt class="pinglunimg" /> :
              <span class="grey">{{huifu1.content}}</span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      songUrl: "",
      infogecienglish: {},
      infogecichina: {},
      lyricArray: [],
      lyricIndex: "",
      currentTime: Number,
      similar: [],
      song: {},
      remenpinlun: [],
      pinlun: []
    };
  },
  created() {
    this.getData();
    this.getsonggeci();
    this.getpinglun();
    this.getStoreSinger();
  },
  methods: {
    getData() {
      axios
        .get("/api/song/url", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
          console.log(res.data);
          console.log(res.data.data);
          this.songUrl = res.data.data[0].url;
          console.log(this.songUrl);
        })
        .catch(err => {
          console.error(err);
        });
    },
    getsonggeci() {
      axios
        .get("/api/lyric", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
            console.log(res.data);
          //   console.log(res.data.lrc);
          console.log(res.data.tlyric);
          //   let lyric1 = res.data.lrc.lyric;
          let lyric2 = res.data.lrc.lyric;
          //   console.log(lyric1);
          console.log(lyric2);
          //   console.log(this.lyricConvertObj(lyric2))
          //   console.log("-----------------------------")
          this.lyricArray = this.lyricConvertObj(lyric2);
          this.infogecienglish = res.data.lrc;
          this.infogecichina = res.data.tlyric;
        })
        .catch(err => {
          console.error(err);
        });
    },
    getpinglun() {
      axios
        .get("/api/comment/music", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
          console.log(res.data);
          console.log(res.data.hotComments);
          this.remenpinlun = res.data.hotComments;
          console.log(res.data.comments);
          this.pinlun = res.data.comments;
        })
        .catch(err => {
          console.error(err);
        });
    },
    goback() {
      this.$router.push({ path: "/" });
      return false;
    },
    lyricConvertObj(lyric) {
      const regNewLine = /\n/;
      const lineArr = lyric.split(regNewLine); // 每行歌词的数组
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/;
      let lyricsObjArr = [];
      lineArr.forEach(item => {
        if (item === "") return;
        const obj = {};
        const time = item.match(regTime);

        obj.lyric =
          item.split("]")[1].trim() === "" ? "" : item.split("]")[1].trim();
        obj.time = time
          ? this.formatLyricTime(time[0].slice(1, time[0].length - 1))
          : 0;
        obj.uid = Math.random()
          .toString()
          .slice(-6);
        if (obj.lyric === "") {
          console.log("这一行没有歌词");
        } else {
          lyricsObjArr.push(obj);
        }
      });
      return lyricsObjArr;
    },
    formatLyricTime(time) {
      // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/;
      const regSec = /:.*\./;
      const regMs = /\./;

      const min = parseInt(time.match(regMin)[0].slice(0, 2));
      let sec = parseInt(time.match(regSec)[0].slice(1, 3));
      const ms = time.slice(
        time.match(regMs).index + 1,
        time.match(regMs).index + 3
      );
      if (min !== 0) {
        sec += min * 60;
      }
      return Number(sec + "." + ms);
    },
    lyricPipei() {
      //   console.log(this.$refs.audio);
      // console.log("-----------------"+this.$refs.audio);
      //   this.$refs.audio.οntimeupdate = function() {

      //   };
      this.currentTime = this.$refs.audio.currentTime;
      //  console.log("-----------------------currenttime："+this.currentTime)
      // 匹配歌词
      for (let i = 0; i < this.lyricArray.length; i++) {
        if (this.currentTime > parseInt(this.lyricArray[i].time)) {
          const index = this.$refs.lyric[i].dataset.index;
          if (i === parseInt(index)) {
            this.lyricIndex = i;
            this.$refs.lyricUL.style.transform = `translateY(${170 -
              30 * (i + 1)}px)`;
          }
        }
      }
    },
    getStoreSinger() {
      console.log(this.$store.getters.song);
      //第一种方法，转化为json对象
      console.log(JSON.stringify(this.$store.getters.song) == "{}");
      // if(JSON.stringify(this.$store.getters.singer)=="{}"){
      //     console.log("if")
      //     this.singer = this.$store.getters.singer
      //     //把this.singer = this.$store.getters.singer临时保存下来，当值为空时，就可以使用临时把欧尼下来的值
      //     sessionStorage.setItem("singcover",JSON.stringify(this.$store.getters.singer));//key随意，
      // }else{
      //     console.log("else")
      //     this.singer = JSON.parse(sessionStorage.getItem("singcover"))
      // }
      // this.singer = this.$store.getters.singer
      //第二种方法，转化为长度
      console.log(Object.keys(this.$store.getters.song).length == 0);
      if (Object.keys(this.$store.getters.song).length != 0) {
        console.log("if");
        this.song = this.$store.getters.song;
        //把this.singer = this.$store.getters.singer临时保存下来，当值为空时，就可以使用临时把欧尼下来的值
        sessionStorage.setItem(
          "singcover",
          JSON.stringify(this.$store.getters.song)
        ); //key随意，
      } else {
        console.log("else");
        this.song = JSON.parse(sessionStorage.getItem("singcover"));
      }
      console.log(this.song);
    }
  },
  mounted() {
    // this.lyricPipei();
  }
};
</script>

<style scoped>
.clicktuili{
  margin-top: 10px;
}
.iconfont {
  color: green;
  position: absolute; /*绝对定位*/
  right: 5px;
  z-index: 99999;
  font-size: 25px;
}
.song-pic {
  text-align: center;
  justify-items: center;
}
.song-pic > img {
  width: 60%;
  height: 60%;
}
.song-info > span {
  display: block;
}
.h3 {
  border-left: 3px solid #f00;
  text-align: left;
  letter-spacing: 3px;
}

.wrapper > ul > li {
  display: inline-block; /**设置为行内元素，强制不换行，同时具备block */
}
.txt {
  text-align: left;
  width: 300px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.wrapper {
  text-align: left;
}
.txt > span {
  display: block;
  color: black;
  font-size: 20px;
}
.songname {
  color: grey;
  font-size: 15px;
  /* overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    width: 40px;
    display: inline-block; */
}
.songnamebox {
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  width: 250px;
}
.text {
  float: left;
  width: 280px;
  height: 50px;
  /* box-shadow: 5px 5px 5px red; */
  margin-bottom: 10px;
  float: left;
}
.picture {
  float: right;
  width: 30px;
  height: 30px;
  /* box-shadow: 5px 5px 5px black; */
}
.songci > ul li {
  display: block;
  text-align: center;
}
.songci {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.songci > img {
  z-index: 200;
  width: 100%;
  height: 300px;
  border-radius: 10px;
}
h3 {
  border-left: 3px solid #f00;
  text-align: left;
  letter-spacing: 3px;
}
.back {
  position: absolute;
  right: 5px;
  z-index: 99999;
}
.songinfo > img {
  width: 60%;
  height: 60%;
  border-radius: 5px;
}
.pinglunimg {
  width: 20px;
  height: 20px;
}
.songpinglun {
  text-align: left;
}
.grey {
  color: grey;
  font-size: 15px;
}
.lefticon {
  float: left;
  width: 60px;
}
.righticon {
  float: right;
  width: 60px;
}
.iconfontunicodetwo {
  position: absolute;
  top: 14rem;
}
.iconfontunicodethree {
  position: absolute;
  top: 14rem;
  left: 1.5rem;
}
.iconinfo {
  width: 240px;
  height: 40px;
  float: left;
}
.iconinfo > span {
  display: block;
}
.gequname {
  color: black;
  font-size: 18px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.geshouname {
  color: grey;
  font-size: 13px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>